<template>
  <div class="sectionConfig">
    <CardContainer headerName="截面配置">
      <template slot="card-content">
        <div class="sectionConfig-box">
          <div class="sectionConfig-header">
            <el-select
              v-model="bridgeValue"
              placeholder="请选择桥梁"
              size="small"
              style="width: 180px; margin-right: 20px;"
            >
              <el-option
                v-for="item in bridgeOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
            <el-select
              v-model="sectionValue"
              placeholder="请选择桥梁"
              size="small"
              style="width: 180px;"
            >
              <el-option
                v-for="item in sectionOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div>
          <div class="sectionConfig-content">
            <div class="sectionConfig-image" @click="handleClick">
              <img
                class="img"
                src="../../../assets/healthMonitorAssets/img/bdg.png"
                alt=""
              />
            </div>
          </div>
          <div class="sectionConfig-footer">
            <el-button
              type="primary"
              size="small"
              plain
              class="sectionConfig-btn mR"
              >取消</el-button
            >
            <el-button type="primary" size="small" class="sectionConfig-btn mR"
              >预览</el-button
            >
            <el-button type="primary" size="small" class="sectionConfig-btn"
              >保存</el-button
            >
          </div>
        </div>
      </template>
    </CardContainer>
    <vx-popup
      :title="dialogTitle"
      width="700px"
      @close="cancelSubmit"
      :active.sync="dialogVisible"
      @confirmPopup="handleSubmit"
      @cancelPopup="cancelSubmit"
    >
      <el-table :data="tableData" style="width: 100%;" border>
        <el-table-column
          type="selection"
          width="55"
          align="center"
        ></el-table-column>
        <el-table-column prop="name" label="截面名称" align="center">
        </el-table-column>
        <el-table-column prop="type" label="监测类型" align="center">
        </el-table-column>
        <el-table-column prop="position" label="截面位置" align="center">
        </el-table-column>
        <el-table-column prop="isTrue" label="是否已标准" align="center">
        </el-table-column>
      </el-table>
    </vx-popup>
  </div>
</template>

<script>
// card 容器组件
import CardContainer from "../components/CardContainer";
export default {
  data () {
    return {
      bridgeValue: '',
      bridgeOptions: [],
      sectionValue: '',
      sectionOptions: [{
        label: '截面显示',
        value: '1'
      }],
      dialogTitle: '截面配置',
      dialogVisible: false,
      tableData: [{
        name: '截面A',
        type: '温度',
        position: 'XXXXXXX',
        isTrue: '是'
      }, {
        name: '截面A',
        type: '温度',
        position: 'XXXXXXX',
        isTrue: '是'
      }, {
        name: '截面A',
        type: '温度',
        position: 'XXXXXXX',
        isTrue: '是'
      }, {
        name: '截面A',
        type: '温度',
        position: 'XXXXXXX',
        isTrue: '是'
      }]
    };
  },
  methods: {
    handleSubmit () {
      this.dialogVisible = false;
    },
    cancelSubmit () {
      this.dialogVisible = false;
    },
    handleClick () {
      this.dialogVisible = true;
    }
  },
  components: {
    CardContainer
  },
};
</script>


<style lang="scss" scoped>
.sectionConfig {
  &-box {
    width: 100%;
    height: auto;
    padding: 15px 0 40px 0;
  }
  &-footer {
    text-align: center;
  }
  &-btn {
    width: 88px;
  }
  &-content {
    padding: 160px 18px 250px 18px;
  }
  &-image {
    width: 100%;
    height: 154px;
    img {
      width: 100%;
      height: 100%;
    }
  }

  .mR {
    margin-right: 30px;
  }
}
</style>
